$(function () {
    // 导航栏wiper布局。
    var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 横向切换选项
        // 设置slider容器能够同时显示的slides数量(carousel模式)。
        slidesPerView: 6,
        // 在slide之间设置距离（单位px）
        spaceBetween: 0,
        // 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，
        // slide会根据惯性滑动可能不止一格且不会贴合。
        freeMode: true,
        // 当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
        observer: true,
        // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
        observeParents: true,
        // 子slide更新时，swiper是否更新。默认为false不更新。
        observeSlideChildren: true
    });

    // 每次刷新页面，重新加载数据，以便获取最新数据
    localStorage.clear();
    // 导航栏的渲染
    for (let i = 0; i < BIAOTI.length; i++) {
        console.log(BIAOTI[i])
        let moban = `<div class="swiper-slide">${BIAOTI[i]}</div>`;
        $('.swiper-wrapper').append(moban);
    }
    // 从本地的localStorage拿数据，如有就赋值给obj，如果没有则创建一个空数组
    let obj = JSON.parse(localStorage.getItem("bendi")) || [];
    // 页面刷新时,展现第一个页面
    // kxf(obj[0])
    console.log(obj)
    console.log('上面obj')
    // 清楚定时器

    // 点击事件
    $('.swiper-slide').click(function () {
        // 存储已经加载过来的页面的type值,如:top junshi
        let shuzu = [];
        // 清空.center-top   dom下所有的子节点
        $('.center-top').empty();
        // 导航栏对应的被点击的标题添加红色
        $(this).addClass("reddd").siblings('.swiper-slide').removeClass("reddd");
        // 输出被点击的标题的下标
        let aa = $('.swiper-slide').index($(this))
        // 本地localStorag的ty属性,存进shuzu数组里面
        for (let l = 0; l < obj.length; l++) {
            shuzu.push(obj[l].ty);
        }
        // 循环localStorag
        for (let i = 0; i < obj.length; i++) {
            // 被点击的标题所对应的type如果在本地的localStorag里面的话,直接把本地的localStorag传到函数kxf()里面
            if (BIAOTI_TYPE[aa] == obj[i].ty) {
                // kxf(obj[i])
                break;
            } else {
                // 如果本地没有的话,则进行一次ajax请求
                if (shuzu.indexOf(BIAOTI_TYPE[aa]) == -1) {
                    qingqiu(BIAOTI_TYPE[aa])
                    break;
                }
            }

        }

    })
    // 初始化导航栏
    swiper.update();
    // 本地localStorag里面没有数据的话,默认请求top页面
    if (obj == '') {
        qingqiu('top')
    }
    // 默认:给第一个标题添加红色
    $('.swiper-slide:first').addClass("reddd")
    // ajax
    function qingqiu(ty) {
        console.log(ty)
        $.ajax({
            url: KAIFA_IP,
            // async:false,
            type: 'get',
            dataType: 'json',
            data: {
                type: ty,
                key: KEYY
            },
            success: function (data) {
                // 拿到数据的同时,给本条数据增加一个标识符,确保数据的唯一性
                data.ty = ty;
                // 把数据push到obj数组里面
                obj.push(data)
                // 清空本地存储,因为数组没有默认清空,如果不每次清空本地localStorag
                // 则会造成本地localStorag里面的数组的累加
                localStorage.clear();
                // 把obj对象转换成字符串
                let str = JSON.stringify(obj)
                // 存进本地localStorag
                localStorage.setItem('bendi', str)
                // kxf(data)
            },
            error: function (err) {
                console.log(err)
            }

        })
    }
    function kxf(data) {
        if (obj == '') {
            return;
        } else {
            if (data.result.stat == 1) {
                let shijian  = [];
                let cunshushijan = [];
                for (let i = 0; i < data.result.data.length; i++) {
                    shijian.push(data.result.data[i].date)
                    if (data.result.data[i].thumbnail_pic_s && data.result.data[i].thumbnail_pic_s02 && data.result.data[i].thumbnail_pic_s03) {
                        let contents = `<div class="top-top">
                        <a herf=${data.result.data[i].url}></a>
                        <div class="top-header">
                    <a href="#">${data.result.data[i].title}</a>
                </div>
                <div class="top-center">
                    <img src=${data.result.data[i].thumbnail_pic_s}
                        alt="">
                    <img src=${data.result.data[i].thumbnail_pic_s02}
                        alt="">
                    <img src=${data.result.data[i].thumbnail_pic_s03}
                        alt="">
                </div>
                <div class="top-bottom">
                    <a href="#">${data.result.data[i].author_name}</a>
                    <a href="#">${data.result.data[i].category}</a>
                    <a href="#" class='datatime'></a>
                    <p>X</p>
                </div>
                        </div>`
                        $('.center-top').append(contents);


                    } else if (data.result.data[i].thumbnail_pic_s && data.result.data[i].thumbnail_pic_s02) {
                        let contents = `<div class="top-top">
                        <a herf=${data.result.data[i].url}></a>
                        <div class="top-header">
                    <a href="#">${data.result.data[i].title}</a>
                </div>
                <div class="top-center-erzhang">
                    <img src=${data.result.data[i].thumbnail_pic_s}
                        alt="">
                    <img src=${data.result.data[i].thumbnail_pic_s02}
                        alt="">
                </div>
                <div class="top-bottom">
                    <a href="#">${data.result.data[i].author_name}</a>
                    <a href="#">${data.result.data[i].category}</a>
                    <a href="#" class='datatime'></a>
                    <p>X</p>
                </div>
                </div>
                `
                        $('.center-top').append(contents);
                    } else if (data.result.data[i].thumbnail_pic_s) {
                        let contents = `<div class="top-top">
                        <a herf=${data.result.data[i].url}></a>
                        <div class="top-header">
                        <a href="#">${data.result.data[i].title}</a>
                    </div>
                    <div class="top-center-yizhang">
                        <img src=${data.result.data[i].thumbnail_pic_s}
                            alt="">
                    </div>
                    <div class="top-bottom">
                        <a href="#">${data.result.data[i].author_name}</a>
                        <a href="#">${data.result.data[i].category}</a>
                        <a href="#" class='datatime'></a>
                        <p>X</p>
                    </div>
                    </div>`
                        $('.center-top').append(contents);
                    }
                }
                for (let k = 0; k < shijian.length; k++) {
                    let dangqian = new Date();
                    let guoqu = new Date(shijian[k])
                    let sjc = (dangqian.getTime() - guoqu.getTime()) / 1000;
                    let day = parseInt(sjc / 60 / 60 / 24);
                    let hour = parseInt(sjc / 60 / 60 % 24);
                    let minute = 0;
                    let tempM = sjc - day * 24 * 60 * 60 - hour * 60 * 60;
                    if (tempM > 0) {
                        minute = parseInt(tempM / 60);
                    }
                    let tempS = sjc - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
                    let second = 0;
                    if (tempS > 0) {
                        second = parseInt(tempS);
                    }
                    if (day !== 0) {
                        // console.log(day + '天前');
                        let aa = day + '天前';
                        for (let h = 0; h < $('.datatime').length; h++) {
                            $('.datatime')[k].append(aa);
                            break;
                        }
                    }
                    if (day == 0 && hour !== 0) {
                        // console.log(hour + '小时前');
                        let aa = hour + '小时前';
                        for (let h = 0; h < $('.datatime').length; h++) {
                            $('.datatime')[k].append(aa);
                            break;
                        }
                    }
                    if (day == 0 && hour == 0 && minute !== 0) {
                        // console.log(minute + '分钟前');
                        let aa = minute + '分钟前';
                        for (let h = 0; h < $('.datatime').length; h++) {
                            $('.datatime')[k].append(aa);
                            break;
                        }
                    }
                    if (day == 0 && hour == 0 && minute == 0 && second !== 0) {
                        // console.log(second + '秒前');
                        let aa = second + '秒前';
                        for (let h = 0; h < $('.datatime').length; h++) {
                            $('.datatime')[k].append(aa);
                            break;
                        }
                    }
                    
                    // console.log(cunshushijan);
                }




               
                urls()
                shanchu();
            }

        }
        // 点击跳转到指定网址
        function urls() {
            $('.top-top').click(function () {
                console.log($(this).children('a').attr('herf'));
                let url = $(this).children('a').attr('herf');
                location.href = url;
            })
        }
        // 点击删除小页面
        function shanchu() {
            $('.top-bottom p').bind('click', function (event) {
                if (event) {
                    event.stopPropagation();
                } else {
                    let event = window.event;
                    event.cancelBubble = true;
                }
                $(this).parent().parent().remove();
            })
        }

    }

})